<template>
  <div>
    详情页 ---- id: {{ id }}

    <div>
      <img :src="item.rightUrl" alt="" />
      <h4>{{ item.nickname }} | {{ item.datetime }}</h4>

      <h1>{{ item.title }}</h1>

      <p>{{ item.desc }}</p>
    </div>
    <el-form ref="form" label-width="80px" :model="form">
      <el-form-item label="评论">
        <el-input type="textarea" v-model="form.value"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加评论</el-button>
      </el-form-item>
    </el-form>

    <h1>评论</h1>
    <!-- 评论 -->
    <ul>
      <li v-for="v in item.mess" :key="v.id">
        <div>
          <img :src="v.avator" alt="" />
        </div>
        <div>
          <p>{{ v.name }} || {{ v.datetime }}</p>
          <p>{{ v.con }}</p>
          <p>点赞 || 收藏</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    this.id = this.$route.params.id;

    axios.post("/api/detail", { id: this.id }).then(resp => {
      console.log(resp.data);
      this.item = resp.data.data;
    });
  },
  data() {
    return {
      id: "",
      item: {},
      form: {
        value: ""
      }
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      if(localStorage.getItem('token')) {
        this.item.mess.unshift({
          avator: require('@/assets/logo.png'),
          name: localStorage.getItem('token'),
          datetime: new Date().toLocaleString(),
          con: this.form.value,
          id: +new Date()
        });
      } else {
        this.$router.push('/home/login')
      }
    }
  }
};
</script>

<style scoped lang="scss">
ul li {
  list-style: none;
  display: flex;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
  padding: 10px 0;
  img {
    width: 30px;
    border-radius: 50%;
  }
  div:last-child {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    p {
      margin: 2px 0;
    }
  }
}
</style>